<template>
  <div class="wrap">
    <div class="col-title">趋势图</div>

    <div class="line-box">
      <AccountLine
        ref="accountLine"
        style="margin-top: 42px; width: 56%"
        :account-list="accountList"
      />

      <AreaLine style="margin-top: 10px; width: 40%" :trendInfo="trendInfo">
        <template slot="controller">
          <a-select
            :getPopupContainer="
              (triggerNode) => {
                return triggerNode.parentNode || document.body;
              }
            "
            style="width: 100px"
            v-model="trendType"
            @change="() => this.loadDataSourceInfo()"
          >
            <a-select-option
              v-for="d in trendTypeMap"
              :key="d.value"
              :value="d.value"
            >
              {{ d.label }}
            </a-select-option>
          </a-select>
        </template>
      </AreaLine>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { ChartResizeMixin } from "@/mixins/ChartResizeMixin";
// import * as echarts from "echarts";
import { gPostAction } from "@/api/manage";
import AccountLine from "./chart/AccountLine";
import AreaLine from "./chart/AreaLine";

export default {
  name: "Trend",
  components: { AccountLine, AreaLine },
  mixins: [ChartResizeMixin],
  data() {
    return {
      accountList: [],
      accountMap: {},
      dataSourceType: "general",
      trendTypeMap: [
        {
          label: "一天内",
          value: "hour",
        },
        {
          label: "一个月内",
          value: "day",
        },
        {
          label: "一年内",
          value: "month",
        },
      ],
      trendType: "hour",
      trendInfo: {},
      trendStatusList: [
        {
          name: "一般",
          key: "value_normal",
          value: 1,
        },
        {
          name: "重要",
          key: "value_critical",
          value: 2,
        },
        {
          name: "严重",
          key: "value_serious",
          value: 3,
        },
      ],
    };
  },
  mounted() {
    // this.loadData();
    this.loadAccountList();
    this.loadDataSourceInfo();
  },
  methods: {
    loadData() {
      const now = new Date();
      this.trendStatusList.forEach((d) => {
        const postData = {
          level: d.value,
          startTime: moment(now).subtract(6, "days").format("YYYY-MM-DD"),
          endTime: moment(now).format("YYYY-MM-DD"),
        };
        gPostAction("/history/flow", postData)
          .then((res) => {
            if (res.data && res.data.list && res.data.list.length) {
              const list = res.data.list;
              for (let i = list.length - 1; i >= 0; i--) {
                const obj = list[i];
                const alertDataObj = this.accountMap[obj.alertTime];
                if (!alertDataObj) {
                  alertDataObj = {
                    label: obj.alertTime,
                    value_normal: 0,
                    value_critical: 0,
                    value_serious: 0,
                  };
                }
                alertDataObj[d.key] = obj.sum;
                this.accountMap[obj.alertTime] = alertDataObj;
              }
            }
          })
          .finally(() => {
            this.accountList = [];
            Object.keys(this.accountMap).forEach((k) => {
              this.accountList.push(this.accountMap[k]);
            });
            this.$refs.accountLine.drawLineChart();
          });
      });
    },
    loadAccountList() {
      this.$nextTick(() => {
        this.loadData();
        // this.accountList = [
        //   {
        //     label: "20210509",
        //     value_normal: 300,
        //     value_critical: 200,
        //     value_serious: 175,
        //   },
        //   {
        //     label: "20210510",
        //     value_normal: 140,
        //     value_critical: 120,
        //     value_serious: 245,
        //   },
        //   {
        //     label: "20210511",
        //     value_normal: 146,
        //     value_critical: 125,
        //     value_serious: 420,
        //   },
        //   {
        //     label: "20210512",
        //     value_critical: 125,
        //     value_normal: 146,
        //     value_serious: 160,
        //   },
        //   {
        //     label: "20210513",
        //     value_critical: 134,
        //     value_normal: 150,
        //     value_serious: 300,
        //   },
        //   {
        //     label: "20210514",
        //     value_critical: 189,
        //     value_normal: 199,
        //     value_serious: 302,
        //   },
        //   {
        //     label: "20210515",
        //     value_critical: 221,
        //     value_normal: 260,
        //     value_serious: 240,
        //   },
        // ];
      });
    },
    loadDataSourceInfo() {
      const postData = {
        level: this.dataSourceType,
        period: this.trendType,
      };

      gPostAction("/dataClassification/statisticSource", postData).then(
        (res) => {
          if (res.success) {
            this.totalData = res.data.count;
            this.dataInfo = res.data.statisticType;
            this.dataSourceInfo = res.data.statisticSource;
            this.trendInfo = res.data.listCountTrend;
          }
        }
      );
    },
  },
};
</script>

<style
  lang="less"
  scoped
>
.wrap {
  padding: 15px 20px;

  .col-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #017972;
    margin-bottom: 20px;

    &::before {
      content: "";
      height: 16px;
      display: inline-block;
      border-left: 2px solid #017972;
      padding-right: 10px;
    }
  }

  .line-box {
    display: flex;
    justify-content: space-between;
  }
}
</style>